<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" label-position="left" :inline="true" v-show="showSearch"
             label-width="68px">
      <el-form-item label="人员姓名" prop="guardName">
        <el-input
          v-model="queryParams.guardName"
          placeholder="请输入姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="安保公司" prop="guardCompany">
        <el-input
          v-model="queryParams.guardCompany"
          placeholder="请输入安保公司"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="电话号码" prop="guardPhonenumber">
        <el-input
          v-model="queryParams.guardPhonenumber"
          placeholder="请输入电话号码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item v-if="false" label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option
            v-for="dict in guardOptions"
            :key="dict.dictValue"
            :value="dict.dictValue"
            :label="dict.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" v-if="isShowOperate">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['patrol:guard:add']"
        >新增
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="success"-->
      <!--          icon="el-icon-edit"-->
      <!--          size="mini"-->
      <!--          :disabled="single"-->
      <!--          @click="handleUpdate"-->
      <!--          v-hasPermi="['patrol:guard:edit']"-->
      <!--        >修改</el-button>-->
      <!--      </el-col>-->
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="danger"-->
      <!--          icon="el-icon-delete"-->
      <!--          size="mini"-->
      <!--          :disabled="multiple"-->
      <!--          @click="handleDelete"-->
      <!--          v-hasPermi="['patrol:guard:remove']"-->
      <!--        >删除</el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="info"
          icon="el-icon-upload"
          size="mini"
          @click="handleImport"
          v-hasPermi="['patrol:guard:import']"
        >导入
        </el-button>
      </el-col>
      <!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    </el-row>

    <el-table v-loading="loading" :data="guardList" @selection-change="handleSelectionChange" style="color: #333333"
              :header-cell-style="{background:'#E3E3E3'}">
      <!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="人员姓名" align="center" prop="guardName"/>
      <el-table-column label="身份证" align="center" prop="guardIdcard"/>
      <el-table-column label="性别" align="center" prop="guardSex">
        <template slot-scope="scope">
          <template v-for="dict in sexOptions">
            <template v-if="scope.row.guardSex == dict.dictValue"><span>{{ dict.dictLabel }}</span></template>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="安保公司" align="center" prop="guardCompany"/>
      <el-table-column label="电话号码" align="center" prop="guardPhonenumber"/>
      <el-table-column label="是否上传保安证书/无犯罪记录证明" align="center" prop="guardPhonenumber">
        <template v-slot="scope">
          <template>
            <span @click="imgpreview(scope.row.guardCertificatePath)" style="cursor: pointer">{{
                scope.row.guardCertificatePath ? "是" : "否"
              }}</span>/
            <span @click="imgpreview(scope.row.guardNocrimePath)" style="cursor: pointer">{{
                scope.row.guardNocrimePath ? "是" : "否"
              }}</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="状态" v-if="false" align="center" prop="status">
        <template slot-scope="scope">
          <template v-for="dict in guardOptions">
            <template v-if="scope.row.status == dict.dictValue"><span>{{ dict.dictLabel }}</span></template>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="isShowOperate">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['patrol:guard:edit']"
            :disabled="/*!((scope.row.status === '0') || (scope.row.status === '2'))*/false"
          >编辑
          </el-button>
          <el-button
            type="text"
            icon="el-icon-check"
            v-if="false"
            :disabled="isDisabledSubmitButton || !(scope.row.status === '0' || scope.row.status === '2')"
            @click="handleSubmit(scope.row)"
            v-hasPermi="['patrol:guard:edit']"
          >提交
          </el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['patrol:guard:remove']"
            :disabled="/*!(scope.row.status === '0')*/false"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="查看图片" :visible.sync="preview" width="800px" append-to-body style="text-align: center">
      <el-image
        style="width: 500px;"
        :src="previewSrcList[0]"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :initial-index="4"
        fit="cover"
      />
    </el-dialog>
    <!-- 添加或修改安保人员对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="guardName">
              <el-input v-model="form.guardName" placeholder="请输入姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号码" prop="guardIdcard">
              <el-input v-model="form.guardIdcard" placeholder="请输入身份证号码"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别">
              <el-select v-model="form.guardSex" placeholder="请选择性别">
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工龄（年）" prop="guardWorkAge">
              <el-input v-model="form.guardWorkAge" placeholder="请输入工龄"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="籍贯" prop="guardNativePlace">
              <!--              <el-input v-model="form.guardNativePlace" placeholder="请输入籍贯"/>-->
              <el-cascader
                size="large"
                :options="options"
                v-model="form.guardNativePlace"
                @change="handleChange"
                :key="key"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安保公司" prop="guardCompany">
              <el-input v-model="form.guardCompany" placeholder="请输入安保公司"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保安证号码" prop="guardCertificateNumber">
              <el-input v-model="form.guardCertificateNumber" placeholder="请输入保安证号码"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="guardPhonenumber">
              <el-input v-model="form.guardPhonenumber" placeholder="请输入电话"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="政审情况" prop="guardPoliticalExamine">
              <el-input v-model="form.guardPoliticalExamine" placeholder="请输入政审情况（例如合格或不合格）"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身体状况" prop="guardPhysicalCondition">
              <el-input v-model="form.guardPhysicalCondition" placeholder="请输入身体状况（例如健康或亚健康等）"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="审核意见" v-show="isShowOpinion">
            <el-input v-model="opinion" type="textarea" placeholder="请输入内容" maxlength="100" :show-word-limit="true"
                      rows="3" disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保安证书" prop="guardCertificatePath">
              <image-upload v-model="form.guardCertificatePath" :limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="无犯罪记录证明" prop="guardNocrimePath">
              <image-upload v-model="form.guardNocrimePath" :limit="1"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="el-upload__tip" style="margin-left: 30px;">
              注意：安保人员添加成功后，只可使用手机登录
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="isSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport"/>
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                   @click="importTemplate">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {listGuard, getGuard, delGuard, addGuard, updateGuard, exportGuard, submitGuard} from "@/api/patrol/guard";
import ImageUpload from "@/components/ImageUpload";
import {regionData} from 'element-china-area-data'
import {checkPermi} from "@/utils/permission";
import {importTemplate} from "@/api/patrol/guard";
import {getToken} from "@/utils/auth";

export default {
  name: "Guard",
  data() {
    let idCard = (rule, value, callback) => {
      let _idRe = /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/
      if (!_idRe.test(value)) {
        callback('身份证长度或格式错误')
      }
      //身份证城市
      var aCity = {
        11: "北京",
        12: "天津",
        13: "河北",
        14: "⼭西",
        15: "内蒙古",
        21: "辽宁",
        22: "吉林",
        23: "⿊龙江",
        31: "上海",
        32: "江苏",
        33: "浙江",
        34: "安徽",
        35: "福建",
        36: "江西",
        37: "⼭东",
        41: "河南",
        42: "湖北",
        43: "湖南",
        44: "⼴东",
        45: "⼴西",
        46: "海南",
        50: "重庆",
        51: "四川",
        52: "贵州",
        53: "云南",
        54: "西藏",
        61: "陕西",
        62: "⽢肃",
        63: "青海",
        64: "宁夏",
        65: "新疆",
        71: "台湾",
        81: "⾹港",
        82: "澳门",
        91: "国外"
      };
      if (!aCity[parseInt(value.substr(0, 2))]) {
        callback('身份证长度或格式错误')
      }
      // 出⽣⽇期验证
      var sBirthday = (value.substr(6, 4) + "-" + Number(value.substr(10, 2)) + "-" +
          Number(value.substr(12, 2))).replace(/-/g, "/"),
        d = new Date(sBirthday)
      if (sBirthday != (d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate())) {
        callback('身份证长度或格式错误')
      }
      // 出⽣⽇期验证
      var sBirthday = (value.substr(6, 4) + "-" + Number(value.substr(10, 2)) + "-" +
          Number(value.substr(12, 2))).replace(/-/g, "/"),
        d = new Date(sBirthday)
      if (sBirthday != (d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate())) {
        callback('身份证长度或格式错误')
      }
      // 身份证号码校验
      if (value.length == 18) {
        var sum = 0,
          weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
          codes = "10X98765432"
        for (var i = 0; i < value.length - 1; i++) {
          sum += value[i] * weights[i];
        }
        var last = codes[sum % 11]; //计算出来的最后⼀位身份证号码
        if (value[value.length - 1] != last) {
          callback('身份证长度或格式错误')
        }
      }
      setFill(value);
      callback();
    }
    let setFill = (value) => {
      let sex = null;
      if (value.length === 18) {
        sex = value.substring(16, 17);
      }
      if (value.length === 15) {
        sex = value.substring(13, 14);
      }
      sex % 2 === 0 ? this.form.guardSex = "1" : this.form.guardSex = "0";
    }
    return {
      previewSrcList: [],
      preview: false,
      // 放置重复提交
      isSubmit: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      opinion: "",
      // 总条数
      total: 0,
      key: 0,
      isDisabledSubmitButton: false,
      // 安保人员表格数据
      guardList: [],
      // 性别数组
      sexOptions: [],
      // 保安状态数组
      guardOptions: [],
      // 是否显示审核意见textarea
      isShowOpinion: false,
      options: regionData,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否在主页进入当前页面
      isOuter: false,
      guardPhonenumber: "",
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/patrol/guard/importData"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        instanceId: null,
        guardName: null,
        guardIdcard: null,
        guardSex: null,
        guardWorkAge: null,
        guardNativePlace: null,
        guardCompany: null,
        guardCertificateNumber: null,
        guardCertificatePath: null,
        guardPhonenumber: null,
        guardPoliticalExamine: null,
        guardPhysicalCondition: null,
        userId: null,
        schoolId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        guardName: [
          {required: true, message: "请输入姓名", trigger: "blur"}
        ],
        guardIdcard: [
          {required: true, message: "请输入身份证号", trigger: "blur"},
          {validator: idCard}
        ],
        guardWorkAge: [
          // {required: true, message: "请输入工龄", trigger: "blur"},
          {min: 1, max: 3, message: "工龄长度需满足1-3位", trigger: "change"}
        ],
        // guardNativePlace: [
        //   {required: true, message: "请输入籍贯", trigger: "blur"}
        // ],
        guardCompany: [
          {required: true, message: "请输入安保公司", trigger: "blur"},
          {min: 1, max: 30, message: "安保公司长度需满足1-30位", trigger: "change"}
        ],
        guardCertificateNumber: [
          // {required: true, message: "请输入保安证号码", trigger: "blur"},
          {min: 1, max: 30, message: "保安证号码长度需满足1-30位", trigger: "change"}
        ],
        guardPhonenumber: [
          {required: true, message: "请输入电话", trigger: "blur"},
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "change"
          }
        ],
        guardPoliticalExamine: [
          {required: true, message: "请输入政审情况", trigger: "blur"},
          {min: 1, max: 30, message: "政审情况长度需满足1-30位", trigger: "change"}
        ],
        guardPhysicalCondition: [
          {required: true, message: "请输入身体状况", trigger: "blur"},
          {min: 1, max: 30, message: "身体状况长度需满足1-30位", trigger: "change"}
        ],
        guardCertificatePath: [
          {required: true, message: "请上传保安照片", trigger: "blur"},
        ],
        guardNocrimePath: [
          {required: true, message: "请上传无犯罪记录证明照片", trigger: "blur"},
        ],
      }
    };
  },
  computed: {
    isShowOperate: function () {
      return checkPermi(['patrol:staff:edit']);
    },
  },
  created() {
    this.queryParams.schoolId = this.$route.query.schoolId;
    this.getDicts("sys_user_sex").then(response => {
      this.sexOptions = response.data;
    });
    this.getDicts("pt_guard_type").then(response => {
      this.guardOptions = response.data;
    });
    this.isOuter = this.$route.query.isOuter;
    this.guardPhonenumber = this.$route.query.guardPhonenumber;
    this.getList();
  },
  mounted() {
    if (this.isOuter) {
      this.queryParams.guardPhonenumber = this.guardPhonenumber;
      this.handleQuery();
    }
  },
  components: {
    ImageUpload
  },
  methods: {
    imgpreview(url) {
      console.log(url);
      if (!url) {
        return;
      }
      this.previewSrcList = [process.env.VUE_APP_BASE_API + url];
      this.preview = true;
    },
    /** 查询安保人员列表 */
    getList() {
      this.loading = true;
      listGuard(this.queryParams).then(response => {
        this.guardList = response.rows;
        this.total = response.total;
        if (this.isOuter) {
          this.isOuter = false;
          this.guardList.forEach(guard => {
            if (guard.guardPhonenumber === this.guardPhonenumber) {
              this.handleUpdate(guard);
            }
          })
        }
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        instanceId: null,
        guardName: null,
        guardIdcard: null,
        guardSex: "0",
        guardWorkAge: null,
        guardNativePlace: null,
        guardCompany: null,
        guardCertificateNumber: null,
        guardCertificatePath: null,
        guardNocrimePath: null,
        guardPhonenumber: null,
        guardPoliticalExamine: null,
        guardPhysicalCondition: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        userId: null
      };
      this.resetForm("form");
      this.key++;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加安保人员";
      this.isShowOpinion = false;
    },
    /** 编辑按钮操作 */
    handleUpdate(row) {
      this.reset();
      if (!Array.isArray(row.guardNativePlace) && row.guardNativePlace) {
        row.guardNativePlace = row.guardNativePlace.split(",");
      }
      if (row.guardWorkAge) {
        row.guardWorkAge = row.guardWorkAge.toString();
      }
      this.form = {...row};
      this.open = true;
      this.title = "编辑安保人员";
      if (row.status == 0) {
        this.isShowOpinion = false;
      } else if (row.status == 2) {
        this.isShowOpinion = true;
        this.opinion = this.form.ptProcessOpinion.opinion;
      }
    },
    /** 提交按钮操作 */
    handleSubmit(row) {
      let data = {};
      data.id = row.id;
      this.isDisabledSubmitButton = true;
      if (row.instanceId) {
        data.instanceId = row.instanceId
      }
      submitGuard(data).then(response => {
        this.msgSuccess("提交成功");
        this.isDisabledSubmitButton = false;
        this.getList();
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.isSubmit = true
          if (this.form.id != null) {
            if (this.form.guardNativePlace) {
              this.form.guardNativePlace = this.form.guardNativePlace.toString();
            }
            updateGuard(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              this.isSubmit = false
            }).catch(e => {
              console.log(e)
              this.isSubmit = false
            });
          } else {
            addGuard(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.resetQuery();
              this.isSubmit = false
            }).catch(e => {
              console.log(e)
              this.isSubmit = false
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除所选数据?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "warning"
      }).then(function () {
        return delGuard(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有安保人员数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "warning"
      }).then(function () {
        return exportGuard(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
    handleChange(value) {
      this.form.guardNativePlace = value.toString();
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "安保人员导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then(response => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>
<style>
.el-dialog__body {
  padding: 10px 20px;
}

.el-dialog__footer {
  padding: 0 10px 10px 10px;
}

.el-dialog__header {
  padding: 10px;
}
</style>
